<template>
  <a-card title="基础字段设置"  style="margin: 20px 0">
    <div class="cardWarp">
      <!-- <a-card class="card" @click="addField"><a-icon type="plus"/></a-card> -->

      <a-card
        hoverable
        style="width: 300px; margin: 8px"
        :title="item.model"
        v-for="(item, index) in form"
        :key="index"
      >
        <a-icon slot="extra" type="close" @click="RemoveField(index)" />
        <a-form
          :form="item"
          layout="horizontal"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="字段名称">
            <a-input
              allow-clear
              placeholder="请输入字段名称"
              v-model="item.wrapper.label"
              @change="FieldNames($event, item.model, index)"
            />
          </a-form-item>
          <a-form-item label="字段类型">
            <a-select
              v-model="item.type"
              @change="
                FieldsType($event, index, item.model, item.wrapper.label)
              "
            >
              <a-select-option value="input">文本框</a-select-option>
              <a-select-option value="textarea">文本域</a-select-option>
              <a-select-option value="number">数字输入框</a-select-option>
              <a-select-option value="select">下拉选择器</a-select-option>
              <a-select-option value="switch">switch开关</a-select-option>
              <a-select-option value="date">日期选择框</a-select-option>
              <a-select-option value="upload">上传</a-select-option>
              <a-select-option value="autoComplete">自动补全</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="必填项" v-if="item.decorator.rules">
            <a-switch v-model="item.decorator.rules[0].required">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-item>
        </a-form>
        <template slot="actions" class="ant-card-actions">
          <a-button type="link" icon="setting" @click="FieldSet(index)">
            字段设置
          </a-button>
          <a-popconfirm
            :title="`是否删除${item.wrapper.label}字段`"
            ok-text="确认"
            cancel-text="取消"
            @confirm="RemoveField(index)"
          >
            <a-button type="link" icon="delete">删除字段</a-button>
          </a-popconfirm>
        </template>
      </a-card>

      <a-modal
        title="添加字段"
        :visible="visible"
        :maskClosable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        11
      </a-modal>
    </div>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
    };
  },
  props: {
    form: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
    addField() {
      this.visible = true;
    },
    FieldsType(value, key, model, label) {
      this.$emit("FieldsType", value, key, model, label);
    },
    FieldNames(el, value, index) {
      this.$emit("FieldNames", el, value, index);
    },
    RemoveField(index) {
      this.$emit("RemoveField", index);
    },
    FieldSet(index) {
      this.$emit("FieldSet", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.cardWarp {
  display: flex;
  flex-wrap: wrap;
}
.card {
  margin: 15px;
  width: 270px;
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
